<template>
	<div>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-input v-model="input" placeholder="请输入收藏夹名称" @keyup.enter.native="collectionCatalog()"></el-input>
			<div class="catalogs">常用</div>
			<div class="catalogs_span">
				<a v-for="(Item,index) in catalogsList" :key="index" @click="collectionUpload(Item)" :class="{active:Item.id==isActive}">{{Item.collectionCatalogName}}
					<i class="el-icon-delete" @click="deleteItem(Item.id)"></i>
					<!-- <i class="el-icon-edit"></i> -->
				</a>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="collections()">确 定</el-button>
			</span>
		</el-dialog>
		<div style="margin-left: 3.5rem;margin-right: 3.5rem;margin-left: 3.5rem;margin-right: 3.5rem;height: 3.875rem;line-height: 3.875rem;">
			<span style="color: #666;">首页></span><span style="color: #000000;">{{table.title}}</span>
		</div>
		<div style="background-color: white;margin-left: 3.5rem;margin-right: 3.5rem;border-radius: 0.3125rem;overflow: hidden;">
			<div style="margin:1.6rem;"><i class="el-icon-chat-dot-square"></i>{{table.title}}</div>
			<div style="display: flex;justify-content: space-between;margin: 1.625rem;">
				<div class="discuss-author clearfix">
					<a class="answer-head">
						<img :src="table.userImages" align="middle" />
					</a>
					<div class="post-detail">
						<div>
							<span>
								<a class="level-color-5  post-name">{{table.userName}}</a>
							</span>
							<div class="post-legend">
								<span class="post-time">
									发布于 {{table.createTime}}
								</span>
							</div>
						</div>
						<div class="feed-legend">
							<span style="cursor:pointer;" class="js-post-like nc-req-auth" @click="Praises(0,table.id)">赞
								{{table.praiseCount}}</span>
							<el-divider direction="vertical"></el-divider>
							<span style="cursor:pointer;" class="js-post-follow nc-req-auth">收藏{{table.collectionCount}} </span>
							<el-divider direction="vertical"></el-divider>
							<span style="cursor:pointer;" class="nc-req-auth js-post-replay">回复{{table.replyCount}}</span>
							<el-divider direction="vertical"></el-divider>
							<span style="cursor:pointer;" class="nc-req-auth js-post-replay">浏览{{table.views}}</span>
						</div>
					</div>


				</div>

			</div>
			<div style="border-top:#e6e6e6 0.0625rem solid ;min-height: 25rem;">
				<!-- <div>{{hh}}</div> -->
				<div v-html="table.content" style="margin: 1.625rem;" />
				<!-- <quill-editor v-model="hh" style="height:60%;"></quill-editor> -->
			</div>
			<div>
				<ul class="oprt-tool-new clearfix">
					<li>
						<div class="oprt-div  js-like-div" :class="{active:table.praiseStatus}" @click="Praises(0, table.id)"><i class="el-icon-thumb"
							 style="font-weight: 400;font-size: 1.125rem;"></i>({{table.praiseCount}})</div>
					</li>
					<li>
						<div class="oprt-div  js-like-div" @click="ChangeCollect(table.collectionId)" :class="{active:table.collectionId}"><i
							 class="el-icon-star-off" style="font-weight: 400;font-size: 1.125rem;"></i>({{table.collectionCount}})</div>
					</li>
					<li></li>
					<li></li>
				</ul>
			</div>

		</div>
		<div style="margin-left: 3.5rem;margin-right: 3.5rem;background-color: white;overflow: hidden;border-top:#e6e6e6 0.0625rem solid ;">
			<div class="module-head clearfix">
				<h1 style="font-size: 1rem;">{{CommentsList.length}}条回复</h1>
				<a class="btn btn-primary float-right nc-req-auth js-post-replay" @click="Change()">
					<i class="ico-submit"></i>
					回帖
				</a>
			</div>
			<!-- 回复帖子模态框 -->
			<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
				<el-input v-model="replycomments" placeholder="请输入内容"></el-input>
				<span slot="footer" class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="Replycomments(id)">确 定</el-button>
				</span>
			</el-dialog>

			<div style="background-color: white;overflow: hidden;margin-top: 1.25rem;margin-bottom: 2rem;" v-for="(Intem,index) in CommentsList"
			 :key="Intem.id">
				<div class="answer-content clearfix">
					<a class="answer-head">
						<img src="https://images.nowcoder.com/images/20210619/3498564_1624091896674/FECD76F09C4EFFA7102ECDBC1795FB3B?x-oss-process=image/resize,m_mfit,h_100,w_100" />
					</a>
					<div class="answer-detail">
						<p><a class="name level-color-7">{{Intem.fromUserName}}</a><span class="post-floor">{{index+1}}#</span></p>
						<div class="answer-brief nc-post-content answer-brief-two">
							{{Intem.content}}😝
						</div>
						<div class="answer-legend">
							<span class="answer-time">发表于 {{Intem.createTime}}</span>
							<a>回复({{Intem.replyCount}})</a>
							<a @click="Praises(1,Intem.id)">赞({{Intem.praiseCount}})</a>
						</div>
					</div>
				</div>
				<div class="reply-box">
					<div class="reply-list" v-for="item in Intem.replies">
						<div class="reply-main clearfix">
							<div class="reply-person">
								<!-- 设置发贴人的样式 -->
								<div v-if="userId==item.fromUserId">
									<a class="level-color-5">{{item.fromUserName}}</a>
									<a>
										<img src="//static.nowcoder.com/nc/image/identity/1.png" class="identity-icon" />
									</a>
									<a>
										<img src="//uploadfiles.nowcoder.com/images/20190708/56_1562592127316_5889949873E3E23C8A0EC0CC8F6042A8" class="identity-icon" />
									</a>
								</div>
								<div v-if="userId!==item.fromUserId">
									<a class="level-color-3">{{item.fromUserName}}</a>
								</div>
								<!-- 设置一级评论和二级评论的样式 -->
								<div v-if="item.replyType==1" style="display: flex;">
									<a v-if="item.fromUserId!==userId">回复了</a>
									<div v-if="item.fromUserId==userId">
										<a class="level-color-5">{{item.fromUserName}}</a>
										<a>
											<img src="//static.nowcoder.com/nc/image/identity/1.png" class="identity-icon" />
										</a>
										<a>
											<img src="//uploadfiles.nowcoder.com/images/20190708/56_1562592127316_5889949873E3E23C8A0EC0CC8F6042A8"
											 class="identity-icon" />
										</a>
									</div>
									<div v-if="item.fromUserId!==Intem.fromUserId">
										<a class="level-color-3">{{item.fromUserName}}</a>
									</div>
								</div>

							</div>
							<div class="reply-content">{{item.content}}</div>

						</div>
						<div class="answer-legend reply-info">
							<span class="answer-time">{{item.createTime}}</span>
							<a style="margin-right: 0;" @click="item.flag=!item.flag">回复({{item.replyCount}})</a>
							<a @click="Praises(2,item.id)">赞({{item.praiseCount}})</a>

						</div>
						<!-- 回复评论 -->
						<div class="mt2" v-show="item.flag">
							<div class="reply-editbox clearfix">
								<div class="reply-write">
									<textarea placeholder="请输入你的观点" class="reply-input reply-input-textarea" style="width: 100%; resize: none; overflow-y: hidden; height: 30px;margin-right: 0.625rem;line-height: 1.875rem;"
									 v-model="replycomments"></textarea>
								</div>
							</div>
							<div class="reply-action clearfix1">
								<a class="icon-emotion"></a>
								<a class="btn btn-primary reply-btn" @click="Reply(item.commentId,item.fromUserId,1,item.id)">回复</a>
							</div>
						</div>

					</div>
					<!-- 回复评论 -->
					<div class="mt2">
						<div class="reply-editbox clearfix">
							<div class="reply-write">
								<textarea placeholder="请输入你的观点" class="reply-input reply-input-textarea" style="width: 100%; resize: none; overflow-y: hidden; height: 30px;margin-right: 0.625rem;line-height: 1.875rem;"
								 v-model="replycomments"></textarea>
							</div>
						</div>
						<div class="reply-action clearfix1">
							<a class="icon-emotion"></a>
							<a class="btn btn-primary reply-btn" @click="Reply(Intem.id,Intem.fromUserId,0,Intem.id)">回复</a>
						</div>
					</div>

				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {
		quillEditor
	} from "vue-quill-editor"
	import {
		HttpManager
	} from '../../request/Facial.js'
	export default {
		components: {
			quillEditor
		},
		data() {
			return {
				textarea2: '',
				hh: 'sdvfdwfwefewvferverv',
				table: {},
				id: this.$route.query.id,
				active: false,
				CommentsList: [],
				replycomments: '',
				reply: '',
				centerDialogVisible: false,
				userId: '',
				dialogVisible: false,
				input: '',
				catalogsList: [],
				isActive: ''
			}
		},
		created() {
			this.Init();
			this.GetcommentsList();
			this.catalogs();
		},
		methods: {
			//获取帖子详情
			Init() {
				HttpManager.Posts(this.id).then(res => {
					console.log(res.data.data);
					this.table = res.data.data;
					this.userId = this.table.userId;
				})
			},
			//获取评论列表
			GetcommentsList() {
				var postsId = this.id;
				var pageNum = 1;
				var pageSize = 100;
				this.axios.get("/posts/" + postsId + "/comments/" + pageNum + "/" + pageSize, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(e => {
					// console.log(e.data.data);
					this.CommentsList = e.data.data;
				})
			},
			//回复帖子
			Replycomments(id) {
				this.centerDialogVisible = false;
				HttpManager.Replycomments(id, this.qs.stringify({
					content: this.replycomments
				})).then(e => {
					this.GetcommentsList();
					this.replycomments = '';
				})
			},
			//回复评论或者帖子
			Reply(commentId, toUserId, replyType, replyId) {
				var parmas = {
					toUserId: toUserId,
					content: this.replycomments,
					replyId: replyId,
					replyType: replyType
				}
				this.axios.put("/reply/" + commentId, this.qs.stringify(parmas)).then(e => {
					this.GetcommentsList();
					this.replycomments = '';
				})
			},
			//点赞
			Praises(type, typeId) {

				var parmas = {
					type: type,
					typeId: typeId
				}
				HttpManager.Praises(this.qs.stringify(parmas)).then(e => {

					this.Init();
					this.GetcommentsList();


				})
			},
			handleClose() {
				this.dialogVisible = false;
			},
			//获取收藏夹目录
			catalogs() {
				HttpManager.catalogs(1, 100).then(e => {
					// alert(1);
					console.log(e);
					this.catalogsList = e.data.data;
				})
			},
			//创建收藏目录
			collectionCatalog() {
				var parmas = {
					collectionCatalogName: this.input
				}
				HttpManager.collectionCatalog(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.$message({
						message: '创建收藏标签成功',
						type: 'success'
					});
					this.catalogs();
				})
			},
			//选中标签
			collectionUpload(Item) {
				this.input = Item.collectionCatalogName;
				this.isActive = Item.id;
			},
			//收藏帖子到某个目录下
			collections() {
				this.dialogVisible = false;
				// alert(12);
				var parmas = {
					collectionCatalogId: this.isActive,
					postsId: this.table.id
				}
				HttpManager.collections(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.$message({
						message: '创建收藏标签成功',
						type: 'success'
					});
					this.Init();
				})
			},
			Change() {

				this.centerDialogVisible = true;

			},
			deleteItem(id) {
				var _that = this
				this.$confirm('此操作视为删除标签,是否继续', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.axios
							.delete(
								'/collection-catalogs/' + id, {
									headers: {
										token: localStorage.getItem("token"),
										'content-type': 'application/json'
									}
								}
							)
							.then(() => {
								this.$message({
									type: 'success',
									message: '已删除标签'
								})
								this.catalogs();
							})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '再考虑一下'
						})
					})
			},
			//收藏
			ChangeCollect(val) {
				if (val == null) {
					this.dialogVisible = true;
				} else {
					// alert(val);
					var _that = this
					this.$confirm('是否取消收藏', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						})
						.then(() => {
							this.axios
								.delete(
									'/collections/' + val, {
										headers: {
											token: localStorage.getItem("token"),
											'content-type': 'application/json'
										}
									}
								)
								.then(() => {
									this.$message({
										type: 'success',
										message: '已取消收藏'
									})
									this.Init();
								})
						})
						.catch(() => {
							this.$message({
								type: 'info',
								message: '再考虑一下'
							})
						})
				}
			}


		}
	}
</script>

<style scoped="scoped">
	.active {
		color: #21a88b;
		font-weight: 500;
	}

	.el-textarea__inner {
		width: 96%;
	}

	.answer-content {
		width: 98%;
		margin-left: 1%;
		margin-right: 1%;
		margin: 0 auto;
		display: flex;
		overflow: hidden;
	}

	.clearfix {
		zoom: 1;
		display: block;
	}

	.answer-head {
		display: block;
		float: left;
		width: 50px;
		height: 50px;
		border: 1px solid #ededed;
		overflow: hidden;
		margin-right: 15px;
		border-radius: 50%;
	}

	.answer-head>img {
		width: 100%;
		height: 100%;
	}

	.answer-detail {
		margin-left: 65px;
		line-height: 1em;
	}

	.level-color-7 {
		color: #fc7123 !important;
	}

	.answer-brief-two {
		display: block !important;
		margin-left: 0 !important;
		margin-top: 10px !important;
	}

	.answer-brief {
		font-size: 14px;
		line-height: 1.8;
	}

	.answer-legend {
		margin-top: 10px;
		color: #999;
		font-size: 12px;
		line-height: 20px;
		margin-right: 1%;
		margin-bottom: 0.625rem;
		cursor: pointer;
	}

	.answer-legend>a {
		float: right;
		color: #21a88b;
		margin-right: 1%;
	}

	.reply-box {
		width: 90%;
		margin-top: 1.25rem;
		padding: 15px;
		margin-left: 5%;
		margin-right: 5%;
		background: #eff0f2;
		border-radius: 4 px;
	}

	.reply-list {
		line-height: 1.5;
		border-bottom: 1px #e8e8e8 solid;
	}

	.reply-main {
		margin-bottom: 10px;
	}

	.clearfix {
		zoom: 1;
		display: block;
	}

	.reply-person {
		margin-right: 15px;
		display: flex;
		white-space: nowrap;

	}

	.reply-person a {
		color: #999;
		max-width: 13em;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		vertical-align: middle;
	}

	.identity-icon {
		width: auto;
		height: 14px;
		margin-right: 2px;
		display: inline-block;
		vertical-align: text-top;
	}

	.reply-content {
		color: #666;
		display: inline;
		line-height: 2;
		vertical-align: middle;
	}

	.mt2 {
		margin-top: 10px;

	}

	.reply-editbox {
		position: relative;
		padding-top: 15px;
		margin-bottom: 0;
	}

	.clearfix {
		zoom: 1;
		display: block;
	}

	textarea.reply-input.reply-input-textarea {
		margin: 0;
		resize: none;
		overflow: hidden;
	}

	textarea.reply-input {
		width: 478px;
		outline: 0;
		font-size: 12px;
		height: 20px;
		line-height: 18px;
		padding: 5px;
	}

	.reply-editbox .reply-action {
		margin-top: 10px;
	}

	.clearfix {
		zoom: 1;
		display: block;
	}

	.icon-emotion {
		display: inline-block;
		vertical-align: middle;
		width: 22px;
		height: 22px;
		margin-right: 10px;
		background: url(https://static.nowcoder.com/images/img/icons/ico-emoticon.png) no-repeat;
	}

	.reply-editbox .btn.reply-btn {
		width: 75px;
		height: 30px;
		line-height: 30px;
		padding: 0;
		float: right;
	}

	.btn {
		display: inline-block;
		text-align: center;
		padding: 10px 0;
		width: 110px;
		color: #fff;
		font-size: 14px;
		border-radius: 3px;
		border: none 0;
		cursor: pointer;
		line-height: normal;
		outline: 0;
		white-space: nowrap;
	}

	.btn-primary {
		background: #25bb9b;
	}

	.el-icon-chat-dot-square {
		color: #ffffff;
		background-color: #25bb9b;
		font-size: 24px;
		margin-right: 0.625rem;
	}

	.reply-write {
		margin-right: 1%;
	}

	textarea {
		border: 1px solid #ddd;
		color: #34495e;
		font-family: Lato, sans-serif;
		font-size: 14px;
		padding: 8px 5px 7px;
		width: 100%;
		height: 22px;
		border-radius: 3px;
		outline: 0;
	}

	.reply-editbox .icon-emotion {
		display: inline-block;
		vertical-align: middle;
		width: 22px;
		height: 22px;
		margin-right: 10px;
		background: url(https://static.nowcoder.com/images/img/icons/ico-emoticon.png) no-repeat;
	}

	.clearfix1 {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
	}

	.module-head {
		padding: 15px 20px 0;
		line-height: normal;
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 1.25rem;
	}

	.module-head h1:before,
	.module-head h2:before {
		background: #ff6547;
		content: "";
		display: inline-block;
		width: 7px;
		height: 7px;
		margin-right: 5px;
		margin-bottom: 2px;
		vertical-align: middle;
	}

	.btn-primary {
		background: #25bb9b;
	}

	.btn {
		display: inline-block;
		text-align: center;
		padding: 10px 0;
		width: 110px;
		color: #fff;
		font-size: 14px;
		border-radius: 3px;
		border: none 0;
		cursor: pointer;
		line-height: normal;
		outline: 0;
		white-space: nowrap;
	}

	.ico-submit,
	.ico-upload,
	.ico-upload2,
	.ico-work {
		display: inline-block;
		*zoom: 1;
		vertical-align: middle;
		background: url(https://static.nowcoder.com/fe/style/images/common/img/icons/ui-ico.png) -9999 px -9999 px no-repeat;
	}

	.answer-head {
		display: block;
		float: left;
		width: 50px;
		height: 50px;
		border: 1px solid #ededed;
		overflow: hidden;
		margin-right: 15px;
		border-radius: 50%;
	}

	.post-detail {
		display: flex;
		justify-content: space-between;

	}

	.post-detail .post-name {
		color: #999;
		display: inline-block;
		vertical-align: text-top;
		margin-bottom: 10px;
		max-width: 13em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.post-legend {
		text-align: right;
	}

	.post-time {
		color: #999;
		font-size: 12px;
		float: left;
	}

	.feed-legend {
		/* float: right; */
		margin-top: 0.875rem;
		color: #999;
		font-size: 0.9375rem;
	}

	.discuss-author {
		width: 100%;
	}

	.level-color-5 {
		color: #42c1a2 !important;
		font-size: 12px;
	}

	.level-color-4 {
		color: #ffaa00 !important;
		font-size: 12px;
	}

	.level-color-3 {
		color: #00aaff !important;
		font-size: 12px;
	}

	.oprt-tool-new {
		width: 100%;
		font-size: 14px;
		margin-top: 10px;
		float: left;
	}

	.oprt-div {
		width: 77px;
		background-color: rgba(0, 0, 0, .05);
		cursor: pointer;
	}

	.oprt-tool-new li {
		float: left;
		margin-bottom: 10px;
		line-height: 40px;
		list-style: none;
		margin-left: 1.25rem;
	}

	.oprt-tool-new div {
		width: 55px;
		height: 40px;
		border-radius: 6px;
		text-align: center;
	}

	.catalogs {
		margin-top: 0.625rem;
	}

	.catalogs_span {
		margin-top: 1.3rem;
	}

	.catalogs_span>a {
		text-decoration: none;
		border-radius: 0.3125rem;
		width: 1.875rem;
		height: 2rem;
		background-color: #e3e3e3;
		padding: 0.3rem;
		margin-left: 1.25rem;
		cursor: pointer;
		position: relative;
	}

	.catalogs_span>a i {
		position: absolute;
		background-color: #000;
		color: #fff;
		border-radius: 50%;
		padding: 2px;
		display: none;
		top: -10px;
		right: -8px;

	}

	.catalogs_span>a i.el-icon-delete {
		right: -8px;
	}

	.catalogs_span>a:hover i {
		background-color: #000;
		color: #fff;
		display: block;
	}

	.catalogs_span>a i:hover {
		background-color: #25bb9b;
		color: #fff;
		display: block;
	}

	.catalogs_span>.active {
		background-color: #25bb9b;
		color: white;
	}
</style>
